import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls";
import { TextureLoader } from "three";
import * as dat from "dat.gui";
import CANNON from "cannon";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
//初始化场景
const scene = new THREE.Scene();
const textureLoader = new TextureLoader();

const gltfLoader = new GLTFLoader();
const dracoLoader = new DRACOLoader();

console.log(CANNON)

dracoLoader.setDecoderPath("/static/gltf/");
dracoLoader.setDecoderConfig({
  type: "js",
});
dracoLoader.preload();
gltfLoader.setDRACOLoader(dracoLoader);

const baketexture = textureLoader.load("/static/textures/工作室.jpg");
baketexture.flipY = false;
baketexture.colorSpace = THREE.SRGBColorSpace;
baketexture.encoding = THREE.sRGBEncoding;

gltfLoader.load("/static/textures/工作室.glb", (gltf) => {
  gltf.scene.traverse(function (child) {
    if (child.type === "Mesh") {
      const bakeMaterial = new THREE.MeshBasicMaterial({
        map: baketexture,
        // color:"gray"
      });
      // const temp = child.material.color;
      // console.log(temp,child.name)
      child.material = bakeMaterial;
      // child.material.color = temp;
    }
  });

  // console.log(gltf);
  scene.add(gltf.scene);
});

const scpectRatio = window.innerWidth / window.innerHeight;
//初始化摄像机 https://threejs.org/docs/index.html?q=camera#api/en/cameras/PerspectiveCamera
const camera = new THREE.PerspectiveCamera(
  50, //视场，相当于眼睛看到的范围。越大看到的范围越广阔，越小看到的物体越大
  scpectRatio,
  0.1, //低于某个阈值就不可见的距离
  100 // 超过某个距离就不可见的阈值
);

// camera.position.y = 6;
// camera.position.z = 10;

//初始化渲染器
const canvas = document.querySelector("canvas.threejs");
const renderer = new THREE.WebGLRenderer({
  canvas,
  alpha: true,
  antialias: true, //开启抗锯齿
});
renderer.setSize(window.innerWidth, window.innerHeight); //重新设置渲染器大小
renderer.shadowMap.enabled = true; //开启阴影
renderer.shadowMap.type = THREE.PCFSoftShadowMap; //设置阴影类型

const maxPixelRatio = Math.min(window.devicePixelRatio, 2); //设置最大像素比，最多2
renderer.setPixelRatio(maxPixelRatio);
renderer.colorSpace = THREE.SRGBColorSpace;

window.addEventListener("resize", () => {
  camera.aspect = window.innerWidth / window.innerHeight; //重新设置相机比例
  camera.updateProjectionMatrix(); //更新相机比例
  renderer.setSize(window.innerWidth, window.innerHeight); //重新设置渲染器大小
});
// scene.backgroundIntensity = 0;
// const amiblight = new THREE.AmbientLight(0xffffff, 1);
// scene.add(amiblight);
// 加入控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; //平滑移动

const mousePosition = new THREE.Vector2(); //获取鼠标位置
window.addEventListener("mousemove", (e) => {
  mousePosition.x = (e.clientX / window.innerWidth) * 2 - 1; //获取鼠标位置
  mousePosition.y = (-e.clientY / window.innerHeight) * 2 + 1; //计算y轴的鼠标位置，负数
});

let scrollY = window.scrollY;
window.addEventListener("scroll", () => {
  scrollY = window.scrollY;
  // console.log(scrollY);
});
camera.position.z=5
const clock = new THREE.Clock();
function animate() {
  const time = clock.getDelta();
  // camera.position.x = 10-scrollY/window.innerHeight;
  // camera.position.y = scrollY/window.innerHeight;
  // camera.position.z = 15-(scrollY/window.innerHeight);
  // console.log(12-(scrollY/window.innerHeight));
  controls.update();
  renderer.render(scene, camera);
}

// animate();

renderer.setAnimationLoop(animate);
